<template>
  <div>
    <el-container>
      <el-header height="80px">XXXX大型后台管理系统
        <div>欢迎用户：{{ store.getters.getUser.username }}</div>
        <el-button @click="logout">退出</el-button>
      </el-header>
      <el-container>
        <el-aside>
          <el-menu unique-opened router default-active="2" class="el-menu-vertical-demo">
            <el-menu-item index="/home">
              <el-icon><House /></el-icon>
              <span>home</span>
            </el-menu-item>
            <el-sub-menu v-for="item in store.getters.getUser.menus" :index="item.id.toString()">
              <template #title>
                <el-icon><Setting /></el-icon>
                <span>{{ item.title }}</span>
              </template>
              <el-menu-item v-for="menu in item.children" :index="menu.url">{{ menu.title }}</el-menu-item>
            </el-sub-menu>
          </el-menu>
        </el-aside>
        <el-main>
            <!-- 二级路由出口 -->
            <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script lang="ts" setup>
import {useStore} from 'vuex'
import {useRouter} from 'vue-router'
let store = useStore()
let router = useRouter()
let logout = ()=>{
  store.dispatch('changeUserAction',false)
  router.push('/login')
}
</script>
<style lang="less" scoped>
.el-header {
  background-color: salmon;
}
</style>
